// Create a new file named Login.tsx
import React, { memo, useEffect, useRef } from 'react';
import { useNavigate } from 'react-router-dom';
import videojs from 'video.js';
import 'video.js/dist/video-js.css';
import 'videojs-flvjs';


function Login() {
  const videoRef = useRef(null);

  useEffect(() => {
    const player = videojs(videoRef.current, {
      techOrder: ['flvjs'],
      sources: [{
        src: 'http://localhost:3030/stream',
        type: 'video/x-flv'
      }],
      controls: true,
      autoplay: true,
      width: 640,
      height: 360
    });

    player.on('error', (error) => {
      console.error('Video.js Error:', error);
    });


  }, []);

  return (
    <div>
      login page
   

      {/* <button onClick={send}>send</button> */}

      <h1 className="text-3xl font-bold underline">
        Hello world!

      </h1>


      {/* <video ref={videoRef} controls style={{ width: '100%' }} />; */}
      {/* <video id="video" controls  src='http://localhost:3030/stream'></video> */}
      <video
        ref={videoRef}
        className="video-js vjs-default-skin"
        controls
        autoPlay
        width="640"
        height="360"
      />
    </div>
  );
}

export default memo(Login);